<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
</div>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-4">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>角色活跃情况</h5>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="echarts-line-chart"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>用户渠道</h5>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="echarts-pie-chart"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>用户登录地</h5>
				</div>
				<div class="ibox-content">
					<div style="height:600px" id="echarts-map-chart"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
	$(function () {
		var l1 = [11, 11, 15, 13, 12, 13, 10];
		var l2 = [1, 2, 2, 5, 3, 2, 0];
		var l3 = [];
		var countUrl =  ctx + "common/echarts/queryRoles";
		var config = {
			url: countUrl,
			type: "post",
			dataType: "json",

			success: function(result) {
				l1 = result.data.online;
				l2 = result.data.resiger;
				l3 = result.data.keyList;

				var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
				var lineoption = {
					title : {
						text: '近七日用户活跃数量'
					},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['注册数量','上线数量']
					},
					grid:{
						x:40,
						x2:40,
						y2:24
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : l3
						}
					],
					yAxis : [
						{
							type : 'value',
							axisLabel : {
								formatter: '{value}'
							}
						}
					],
					series : [
						{
							name:'注册数量',
							type:'line',
							data:l2,
						},
						{
							name:'上线数量',
							type:'line',
							data:l1,
						}
					]
				};
				lineChart.setOption(lineoption);
				$(window).resize(lineChart.resize);
			}
		};
		$.ajax(config)


		var channel = [];
		var count = [];
		var countUrl =  ctx + "common/echarts/queryChannelRoles";
		var config = {
			url: countUrl,
			type: "post",
			dataType: "json",

			success: function(result) {
				channel = result.data.channel;
				count = result.data.count;
				var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
				var pieoption = {
					title : {
						text: '用户渠道来源',
						subtext: '代理渠道',
						x:'center'
					},
					tooltip : {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient : 'vertical',
						x : 'left',
						data:channel
					},
					calculable : true,
					series : [
						{
							name:'访问来源',
							type:'pie',
							radius : '55%',
							center: ['50%', '60%'],
							data:count
						}
					]
				};
				pieChart.setOption(pieoption);
				$(window).resize(pieChart.resize);
			}
		};
		$.ajax(config)

		var addrData= [];
		var countUrl =  ctx + "common/echarts/queryAccountIp";
		var config = {
			url: countUrl,
			type: "post",
			dataType: "json",

			success: function(result) {
				debugger;
				addrData = result.data;
				var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
				var mapoption = {
					title : {
						text: '用户登录地',
						subtext: '',
						x:'center'
					},
					tooltip : {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						x:'left',
						data:['iphone3','iphone4','iphone5']
					},
					dataRange: {
						min: 0,
						max: 100,
						x: 'left',
						y: 'bottom',
						text:['高','低'],           // 文本，默认为数值文本
						calculable : true
					},
					toolbox: {
						show: true,
						orient : 'vertical',
						x: 'right',
						y: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					roamController: {
						show: true,
						x: 'right',
						mapTypeControl: {
							'china': true
						}
					},
					series : [
						{
							name: '1',
							type: 'map',
							mapType: 'china',
							roam: false,
							itemStyle:{
								normal:{label:{show:true}},
								emphasis:{label:{show:true}}
							},
							data:addrData
						}
					]
				};
				mapChart.setOption(mapoption);
				$(window).resize(mapChart.resize);

			}
		};
		$.ajax(config)




	});
</script>
</body>
</html>